<template>
  <v-row :dense="$vuetify.breakpoint.smAndDown">
    <v-col cols="12">
      <PrinterLimitsCard></PrinterLimitsCard>
    </v-col>
    <v-col cols="12">
      <RetractCard></RetractCard>
    </v-col>
    <v-col cols="6" md="8">
      <bed-mesh class="mb-2 mb-sm-4" v-if="supportsBedMesh && klippyReady"></bed-mesh>
      <end-stops-card class="mb-2 mb-sm-4"></end-stops-card>
      <runout-sensors-card v-if="supportsRunoutSensors"></runout-sensors-card>
    </v-col>
    <v-col cols="6" md="4">
      <bed-mesh-controls v-if="supportsBedMesh && klippyReady" class="mb-2 mb-sm-4"></bed-mesh-controls>
    </v-col>
  </v-row>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'
import StateMixin from '@/mixins/state'

import BedMesh from '@/components/widgets/bedmesh/BedMesh.vue'
import BedMeshControls from '@/components/widgets/bedmesh/BedMeshControls.vue'
import EndStopsCard from '@/components/widgets/endstops/EndStopsCard.vue'
import RunoutSensorsCard from '@/components/widgets/runout-sensors/RunoutSensorsCard.vue'
import PrinterLimitsCard from '@/components/widgets/limits/PrinterLimitsCard.vue'
import RetractCard from '@/components/widgets/retract/RetractCard.vue'

@Component({
  components: {
    RetractCard,
    PrinterLimitsCard,
    BedMesh,
    BedMeshControls,
    EndStopsCard,
    RunoutSensorsCard
  }
})
export default class Tune extends Mixins(StateMixin) {
  get supportsBedMesh () {
    return this.$store.getters['mesh/getSupportsBedMesh']
  }

  get supportsRunoutSensors () {
    return this.$store.getters['printer/getRunoutSensors'].length
  }

  get supportsEndstops () {
    const endStops = this.$store.getters['printer/getEndstops']
    return (Object.keys(endStops).length > 0)
  }
}
</script>
